<template>
  <view>
    <Search />
    <!-- 滚动容器 -->
    <view class="cate">
      <scroll-view class="cate_left" scroll-y>
        <!-- 渲染左边的列表 -->
        <view
          v-for="(item, index) in cateLeft"
          :key="item.cat_id"
          @tap="tabsChange(index)"
          class="cate_left_item"
          :class="{
            active: activeIndex === index,
          }"
        >
          {{ item.cat_name }}
        </view>
      </scroll-view>
      <scroll-view class="cate_right" scroll-y>
        <view class="floor" v-for="item in cateRight" :key="item.cat_id">
          <!-- 右边楼层数据渲染 -->
          <view class="title">
            <!-- 标题 -->
            {{ item.cat_name }}
          </view>
          <!-- 第二层循环渲染 -->
          <view class="list">
            <navigator
              :url="`/pages/goods_list/main?cid=${item2.cat_id}`"
              class="cate_right_item"
              v-for="item2 in item.children"
              :key="item2.cat_id"
            >
              <image
                class="item_image"
                lazy-load
                :src="item2.cat_icon"
                mode="aspectFill"
              >
                <!-- 图片 -->
              </image>
              <!-- 文本说明 -->
              <text class="item_text">
                {{ item2.cat_name }}
              </text>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import Search from "@/components/Search/index.vue";
export default {
  components: {
    Search,
  },
  data() {
    return {
      cateLeft: [],
      cateRight: [],
      activeIndex: 0,
      cateAll: [],
    };
  },
  onLoad() {
    const cateAll = uni.getStorageSync("cateAll") || []; //做一个短路运算：如果数据有误，就初始化一个空数组
    if (cateAll.length === 0) {
      // 如果没有数据，就发送请求，获取数据：
      this.getCateData();
    } else {
      const old = uni.getStorageSync("cateAllTime");
      const now = Date.now();
      const gapTime = 60 * 1000;
      if (now - old >= gapTime) {
        // 如果超时了，
        this.getCateData();
      } else {
        // 如果数据没有过期
        this.initData(cateAll);
      }
    }
  },
  methods: {
    tabsChange(index) {
      this.activeIndex = index;
      this.cateRight = this.cateAll[index].children;
    },
    getCateData() {
      uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/categories",
        success: (res) => {
          console.log(res.data.message);
          const cateAll = res.data.message;
          // 应该更新！！
          this.initData(cateAll);
          uni.setStorageSync("cateAll", cateAll);
          uni.setStorageSync("cateAllTime", Date.now());
          // this.cateLeft = cateAll.map((item) => {
          //   //  return {   气死啦！！对象是：：：：不是等于号！！！
          //   //    cat_name = item.cat_name,
          //   //    cat_id = item.cat_id,
          //   //     };
          //   return {
          //     cat_name: item.cat_name,
          //     cat_id: item.cat_id,
          //   };
          // });
          this.initData(cateAll);
        },
      });
    },
    initData(cateAll) {
      this.cateAll = cateAll;
      // 并且处理左右两边列表的数据
      this.cateLeft = cateAll.map(({ cat_id, cat_name }) => ({
        cat_id,
        cat_name,
      }));
      this.cateRight = cateAll[0].children;
    },
  },
};
</script>

<style lang="less" scoped>
.cate {
  display: flex;
  .cate_left {
    height: calc(100vh - 100rpx);
    width: 182rpx;
    background-color: #f3f3f3;
    .cate_left_item {
      // width: 112rpx;
      // padding: 0 35rpx;
      // line-height: 114rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 114rpx;
      font-size: 28rpx;
      color: #707070;
      &.active {
        color: #e8424d;
        &::before {
          content: "";
          width: 4rpx;
          height: 44rpx;
          background-color: #e8424d;
          position: absolute;
          left: 0;
        }
      }
    }
  }
  .cate_right {
    flex: 1;
    height: calc(100vh - 100rpx);
    background-color: #ffffff;
    .floor {
      .title {
        display: flex;
        height: 100rpx;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        // color: #5b5b5b;
        &::before,
        &::after {
          content: "/";
          color: #656565;
          margin: 0 10rpx;
        }
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        .cate_right_item {
          width: 33.33%;
          padding: 20rpx 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .item_image {
            width: 120rpx;
            height: 120rpx;
          }

          .item_text {
            margin-top: 5rpx;
            font-size: 21rpx;
          }
        }
      }
    }
  }
}
</style>